<template>
  <!-- 左侧联系人列表 -->
  <div class="nav">
    <!-- 顶部搜索栏 -->
    <div class="search">
      <div class="search-box">
        <div class="input">
          <img src="@/assets/svg/search.svg">
          <input type="text" placeholder="请输入关键词" v-model.trim="searchInput">
        </div>
        <!-- 添加好友 -->
        <AddDialog/>
      </div>
    </div>
    <!-- 好友滚动列表 -->
    <el-scrollbar class="nav-scroll">
      <div 
        class="nav-scroll-item"
        :class="item.id===route.params.id?'active':''" 
        v-for="item in friendList" 
        :key="item.id" 
        @click="handleClick(item)"
        @contextmenu.prevent="openMenu($event, item)"
      >
      <div class="item" style="display: flex">
        <div class="left">
          <div class="avatar">
              <el-avatar 
                :icon="UserFilled" 
                class="img"  
                :class="item.role==0?'a':item.role==1? 't':'s'"
                shape="square" 
                :src="item.avatar"
              />
              <span class="unread" v-if="item.unReadCount">
                {{ item.unReadCount>=99 ? '99+' : item.unReadCount }}
              </span>
          </div>
        </div>
        <div class="right">
          <div class="name-time">
            <span class="name">{{ item.name }}</span>
            <span class="time">{{formatLastTime(item.lastTime)}}</span>
          </div>
          <span class="msg">{{ item.lastMsg }}</span>
        </div>
      </div>
      </div>
    </el-scrollbar>
    <NavContextMenu v-show="visible" :style="menuStyle" :friendId="selectFriendId"/>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch, reactive } from 'vue';
import NavContextMenu from './NavContextMenu.vue'
import { UserFilled } from '@element-plus/icons-vue'
import { useStore } from 'vuex';
import { useRouter, useRoute } from 'vue-router';
import AddDialog from './AddDialog.vue'
import { formatLastTime } from '@/utils/formatDate.js'

// 仓库
const store = useStore()
const router = useRouter()
const route = useRoute()
const searchInput = ref('')
// const userInfo = computed(() => store.state.userModule.userInfo)
const friendList = computed(() => store.getters['friendModule/searchFriend'](searchInput.value))

// 前往与该好友的聊天
const handleClick = (item) => {
  router.push({
    path: `/home/message/chat/${item.id}`,
    query: {
      role: item.role
    }
  })
}

// 获取好友列表
// const initFriendList = async () => {
  // store.dispatch('friendModule/initFriendList', {id: userInfo.value.id})
// }

// -----contextMenu 相关--------
const selectFriendId = ref(null)
const visible = ref(false)
const menuStyle = reactive({
  left: 0,
  top: 0
})

//展示 menu
const openMenu = (e, item) => {
  const { x, y } = e
  menuStyle.left = x + 'px'
  menuStyle.top = y + 'px'
  selectFriendId.value = item.id
  visible.value = true
}

// 关闭 menu
const closeMenu = () => {
  visible.value = false
}

// 鼠标点击监听变化
watch(()=>visible.value, val => {
  if (val) {
    document.body.addEventListener('click', closeMenu)
  } else {
    document.body.removeEventListener('click', closeMenu)
  }
})


onMounted(() => {
  // initFriendList()
})


</script>

<style lang="less" scoped>
.nav {
  // width: 240px;
  width: 241px;
  height: 100%;
  border-right: 1px solid #d6d6d6;
  overflow-y: hidden;
  background-color: #f7f7f7;
  .search {
    width: 100%;
    height: 48px;
    line-height: 48px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #e7e7e7;
    .search-box {
      // width: 100%;
      height: 100%;
      padding: 0 11px 0 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .input {
        position: relative;
        img {
          width: 14px;
          height: 14px;
          position: absolute;
          top: 18px;
          left: 6px;
        }
        input {
          width: 150px;
          height: 25px;
          border-radius: 7px;
          outline: none;
          border: none;
          background-color: #e2e2e2;
          padding-left:27px;
          font-size: 12px;
        }
      }
      .add {
        background-color: #e2e2e2;
        height: 27px;
        width: 27px;
        line-height: 25px;
        text-align: center;
        border-radius: 4px;
        margin-top: 3px;
        img {
          width: 15px;
          height: 100%;
        }
      }
      .add:hover {
        cursor: pointer;
        background-color: #d1d1d1;
      }
    }
  }
  .nav-scroll {
    height: calc(600px - 48px);
    .nav-scroll-item {
      width: 100%;
      height: 55px;
      display: flex;
      padding: 8px 0;
      font-size: 16px;
      color: black;
      background: #efefef;
      border-bottom: 1px solid #dddddd;
      transition: all .2s;
      font-size: 15px;
      align-items: center;
      .item {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 10px 0 12px;

        .left {
          display: flex;
          .avatar {
            width: 43px;
            height: 43px;
            padding-right: 10px;
            position: relative;
            .img {
              width: 100%;
              height: 100%;
            }
            .a {
              border: 1px solid #e6a23c;
            }
            .t {
              border: 1px solid #409eff;

            }
            .s {
              border: 1px solid #67c23a;
            }

            .unread {
              position: absolute;
              top: -8px;
              right: 3px;
              background-color: #f03535;
              font-size: 12px;
              padding: 2px 5px;
              color: #fff;
              border-radius: 10px;
              // 设置字体小于12
              transform:scale(0.9);
            }

          }
        }
        .right {
          width: 100%;
          height: 100%;
          .name-time {
            display: flex;
            justify-content: space-between;
            .name {
              font-size: 14px;
              display: inline-block;
              max-width: 109px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .time {
              font-size: 12px;
              color: #999999;
            }
          }
          .msg {
            padding-top:12px;
            display: inline-block;
            width: 130px;
            font-size: 12px;
            color: #999999;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

      }

      .tag {
        font-size: 14px;
        line-height: 20px;
        padding-left: 2px;
      }
    }
    .nav-scroll-item:last-child {
      border: none;
    }
    .active {
      background-color: #cfcfcf;
    }
    .nav-scroll-item:hover {
      background-color: #d9d8d8;
      cursor: pointer;
    }
  }
}
</style>
